<template>
  <Layout class="hs-layout">
    <!-- 左侧菜单 -->
    <Sider
      class="hs-sider"
      ref="side"
      hide-trigger
      collapsible
      :collapsed-width="0"
      v-model="isCollapsed"
      :style="{ zIndex: 3 }"
    >
      <div class="hs-logo">
        <img src="../assets/logo.png" />
        <div class="hs-login-logo-text">靓鲸洗洗衣订单处理系统</div>
      </div>

      <Menu
        ref="menu"
        :open-names="openNames"
        :active-name="activeName"
        theme="dark"
        width="auto"
        :accordion="true"
      >
        <!--                <MenuItem name="dashboard" to="/index/dashboard">-->
        <!--                    <Icon type="ios-navigate"></Icon>-->
        <!--                    <span>概况</span>-->
        <!--                </MenuItem>-->
        <template v-for="item in permission">
          <template v-if="item.children">
            <Submenu :name="item.adminPermissionId">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>
                <span>{{ item.title }}</span>
              </template>
              <MenuItem
                :name="v.adminPermissionId"
                v-for="(v, i) in item.children"
                :key="i"
                :to="v.permissionUrl"
              >
                <span>{{ v.title }}</span>
              </MenuItem>
            </Submenu>
          </template>
          <template v-else>
            <MenuItem :name="item.adminPermissionId" :to="item.permissionUrl">
              <Icon type="ios-navigate"></Icon>
              <span>{{ item.title }}</span>
            </MenuItem>
          </template>
        </template>
      </Menu>
    </Sider>

    <Layout>
      <!-- 右侧头部 -->
      <Header class="hs-header" :style="{ zIndex: 2 }">
        <Icon @click="noticeShow=!noticeShow" :class="allNoCheck!=0 ?'tipIcon noticeIcon':'noticeIcon'" type="md-notifications" />
        <div v-show="noticeShow" class="noticeList">
          <Icon @click="noticeShow=false"  class="closeIcon" type="ios-close" />
          <p class="noticeTitle">异常订单</p>
          <ul v-if="noticeList.length!=0" class="listCon">
            <li @click="itemClick(item)" :class="item.isClick?'':'noClick'" v-for="(item,index) in noticeList" :key="index">{{item.msg}}</li>
          </ul>
          <p style="width: 100%;text-align: center;line-height: 100px;" v-else>暂无数据</p>
          <p class="noCheck" @click="tipClick"  v-if="allNoCheck!=0">您有<span>{{allNoCheck}}</span>条异常未处理</p>
        </div>
        <Icon
          @click.native="collapsedSider"
          type="md-menu"
          size="24"
          :class="rotateIcon"
        ></Icon>
        <Dropdown class="hs-avatar">
          <div class="hs-avatar-info">
            <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
            <span>{{ this.userInfo.username }}</span>
          </div>
          <DropdownMenu slot="list">
            <DropdownItem @click.native="isShowModal = true">
              修改密码
            </DropdownItem>
            <DropdownItem divided @click.native="confirm">
              退出登录
            </DropdownItem>
          </DropdownMenu>
         
        </Dropdown>

      </Header>

      <Content :style="{ padding: '0 16px', zIndex: 0 }">
        <!-- 右侧内容区域 -->
        <transition name="slide-fade">
          <router-view />
        </transition>
      </Content>

      <!-- 右侧底部 -->
      <Footer :style="{ zIndex: 1 }">
        <div class="hs-foot">
          <div class="hs-version">
            <span class="hs-version-text">靓鲸洗洗衣订单处理系统</span>
            <span class="hs-version-text">正式版本 1.0.5</span>
          </div>
          <div class="hs-copyright">
            Copyright © 2024 靓鲸洗生活服务（济宁）有限公司
          </div>
        </div>
      </Footer>
    </Layout>

    <Modal
      v-model="isShowModal"
      title="修改密码"
      @on-cancel="hide('formCustom')"
      :mask-closable="false"
    >
      <Form
        ref="formCustom"
        :model="params"
        :rules="ruleCustom"
        :label-width="100"
      >
        <FormItem label="原密码" prop="password">
          <Input type="password" v-model="params.password"></Input>
        </FormItem>
        <FormItem label="新密码" prop="newPassword">
          <Input type="password" v-model="params.newPassword"></Input>
        </FormItem>
        <FormItem label="确认密码" prop="passwordCheck">
          <Input type="password" v-model="params.passwordCheck"></Input>
        </FormItem>
      </Form>

      <!-- 重写对话框底部按钮 -->
      <div slot="footer">
        <Button @click="hide('formCustom')">取消</Button>
        <Button
          type="primary"
          @click="updatePassword('formCustom')"
          :loading="loadingBtn"
        >
          <span v-if="!loadingBtn">确定</span>
          <span v-else>请稍候...</span>
        </Button>
      </div>
    </Modal>
  </Layout>
</template>

<script>
  export default {
    name: 'index',
    data() {
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('新的密码不能为空'));
        } else {
          if (this.params.passwordCheck !== '') {
            // 对第二个密码框单独验证
            this.$refs.formCustom.validateField('passwordCheck');
          }
          callback();
        }
      };
      const validatePassCheck = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.params.newPassword) {
          callback(new Error('两次密码输入的不一致!'));
        } else {
          callback();
        }
      };
      return {
        noticeShow:false,
        isShowModal: false,
        loadingBtn: false,
        noticeList:[],
        allNoCheck:0,
        params: {
          password: '',
          newPassword: '',
          passwordCheck: ''
        },
        ruleCustom: {
          newPassword: [
            { required: true, validator: validatePass, trigger: 'blur' }
          ],
          passwordCheck: [
            { required: true, validator: validatePassCheck, trigger: 'blur' }
          ],
          password: [
            { required: true, message: '原密码不能为空', trigger: 'blur' }
          ]
        },
        // 展开
        openNames: [],
        // 选中
        activeName: '',
        // 是否隐藏菜单栏
        isCollapsed: false,
        // 是否全屏
        fullscreen: false,
        // 权限菜单
        permission: [],
        // 当前登录用户信息
        userInfo: {
          username: '未登录'
        }
      };
    },
    computed: {
      rotateIcon() {
        return ['hs-menu-icon', this.isCollapsed ? 'hs-rotate-icon' : ''];
      }
    },
    created() {
      // 整理选中菜单
      this.selectMenu();
      // 用户-获取用户信息
      this.selectInformation();
      // 权限-获取当前用户权限列表
      this.myPermissionList();
      // this.getData()
      setInterval(()=>{
        this.getData()
      },60000)

    },
    methods: {
      tipClick(){
        this.noticeShow=false
        this.$router.push({
          path:'/laundry-web/index/wash/abnormal-order',         
        })

      },
      itemClick(item){
        let obj = JSON.parse(JSON.stringify(this.noticeList))
        obj[0].isClick=true
        this.noticeShow=false
        this.noticeList=obj
        this.$forceUpdate()
        window.location.href='/laundry-web/index/wash/abnormal-order?code='+item.orderCode
        // this.$router.push({
        //   path:'/index/wash/abnormal-order',
        //   // query:{
        //   //   code:item.orderCode
        //   // }
        // })

      },
      getData(){
        this.axios
          .post('/orderMall/warnMsg')
          .then(res => {
            this.allNoCheck = res.data?.warnNum  || 0         
            if(res.data.orderCode){
              if(this.noticeList[0]?.orderCode!=res.data.orderCode){
                  this.noticeShow=true
                  this.noticeList[0]={
                    isClick:false,
                    orderCode:res.data.orderCode,
                    msg:res.data.msg,
                  }
              }else{
                // this.noticeShow=false
              }
              
            }else{
              this.noticeList[0]=[]
            }

          })

      },
      /// 权限-获取当前用户权限列表
      myPermissionList() {
        this.$Spin.show();
        this.axios.post('/adminLogin/myPermissionList').then(res => {
          this.$Spin.hide();
          if (res.status == 200) {
            this.permission = res.data.roleList;
            this.$nextTick(() => {
              this.$refs.menu.updateOpened();
              this.$refs.menu.updateActiveName();
            });
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: '服务器内部错误',
              desc: '获取当前用户权限列表接口报错',
              duration: 0
            });
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: '服务器内部错误',
              desc: '获取当前用户权限列表接口报错',
              duration: 0
            });
          }
        });
      },
      // 用户-获取用户信息
      selectInformation() {
        this.$Spin.show();
        this.axios.post('/adminMaintain/selectInformation').then(res => {
          this.$Spin.hide();
          if (res.status == 200) {
            this.userInfo = res.data;
            this.$store.commit('setUserInfo', this.userInfo);
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: '服务器内部错误',
              desc: '获取当前用户信息接口报错',
              duration: 0
            });
          }
        });
      },
      // 用户-是否确认推出登录
      confirm() {
        this.$Modal.confirm({
          title: '是否退出登录？',
          // content: '<p>Content of dialog</p><p>Content of dialog</p>',
          onOk: () => {
            // 用户-推出登录
            this.logout();
          },
          onCancel: () => {
            this.$Message.info('您点击了取消.');
          }
        });
      },
      // 用户-推出登录
      logout() {
        this.$Spin.show();
        this.axios.post('/adminLogin/logout').then(res => {
          this.$Spin.hide();
          if (res.status == 200) {
            // 跳转登录页面
            this.$router.replace({
              path: '/login'
            });
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: '服务器内部错误',
              desc: '退出登录接口报错',
              duration: 0
            });
          }
        });
      },
      // 修改密码
      updatePassword(name) {
        this.$refs[name].validate(valid => {
          if (valid) {
            this.loadingBtn = true;
            this.axios
              .post('/adminMaintain/updatePassword', this.params)
              .then(res => {
                this.loadingBtn = false;
                if (res.status == 200) {
                  // 退出登录
                  this.logout();
                }
                if (res.status == 201) {
                  this.$Message.error(res.msg);
                }
                if (res.status == 500) {
                  this.$Notice.error({
                    title: '服务器内部错误',
                    desc: '修改密码接口报错',
                    duration: 0
                  });
                }
              });
          } else {
            this.$Message.error('还有信息没有填写完整！');
          }
        });
      },
      // 选中菜单
      selectMenu() {
        let name = this.$router.currentRoute.name;
        let arr = name.split('_');
        this.openNames = [arr[0]];
        this.activeName = name;
      },
      collapsedSider() {
        this.$refs.side.toggleCollapse();
      },
      // 关闭模态框
      hide(name) {
        this.isShowModal = false;
        this.$refs[name].resetFields();
      },
      // 全屏事件
      handleFullScreen() {
        let element = document.documentElement;
        if (this.fullscreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        this.fullscreen = !this.fullscreen;
      }
    }
  };
</script>

<style scoped lang="less">
  .hs-layout {
    height: 100vh;
    overflow: hidden;

    .hs-avatar {
      transition: all 0.3s;
      cursor: pointer;

      &:hover {
        background-color: #f8f8f9;
      }

      .hs-avatar-info {
        display: flex;
        padding-right: 10px;
        align-items: center;

        span {
          margin-left: 10px;
        }
      }
    }

    .hs-menu-icon {
      cursor: pointer;
      transition: all 0.3s;
    }

    .hs-rotate-icon {
      transform: rotate(-90deg);
    }

    .hs-sider {
      overflow: auto;
      background-color: #191a23;
      box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);

      &::-webkit-scrollbar {
        width: 0px;
      }
    }

    .hs-logo {
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 35px;
        border-radius: 5px;
        height: auto;
      }
      div {
        margin-left: 10px;
        font-size: 15px;
        color: #3d9c9a;
        font-weight: 900;
      }
    }

    .hs-header {
      position: sticky;
      top: 0;
      width: 100%;
      background: #fff;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.1);
    }

    .hs-foot {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .hs-version-text {
        margin: 0 5px;
      }
    }
  }

  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all 0.5s ease;
  }

  .slide-fade-leave-active {
    transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
  }

  .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }
  .noticeIcon{
    position: absolute;
    right: 150px;
    top: 20px;
    font-size: 30px;
    cursor: pointer;
  }
  .closeIcon{
    font-size: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 30px;
    cursor: pointer;
  }
  .tipIcon::after{
    content: "";
    width:10px;
    height: 10px;
    background-color: red;
    border-radius: 10px;
    position: absolute;
    right: -5px;
    top:-5px;
  }
  .noticeList{
    width: 330px;
    height: 180px;
    position: absolute;
    right: 180px;
    top: 30px;
    background-color: #fff;
    border-radius: 10px;
    /* border: 1px solid #8d8c8c; */
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    .noticeTitle{
      width: 100%;
      text-align: center;
      margin-top: 10px;
      line-height: 30px;
    }
    .noCheck{
      width: 100%;
      text-align: center;
      cursor: pointer;
      span{
        color: red;
      }
    }
    .listCon::-webkit-scrollbar{
      width: 1px;
    }
    .listCon{
      width: 100%;  
      height: 80px;
      margin-top: 5px;  
      padding: 0 10px 10px 10px;
      overflow-y: scroll;
      .noClick::before{
        content: "";
        width: 10px;
        height: 10px;
        background-color: red;
        border-radius: 10px;
        position: absolute;
        left: -5px;
        top: 10px;


      }
      li{
        width: 100%;
        list-style: none;
        float: left;
        line-height: 20px;
        position: relative;
        padding:5px;
        cursor: pointer;
      }
      
    }
  }
  p {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    
}
</style>
